<!-- 商品详细,添加到购物车 -->
<template>
  <div class="goods-main">
    <Navbar :title="title" />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img class="bannerImg" :src="item.img_url" />
      </van-swipe-item>
    </van-swipe>
    <div class="swiperdec">
      <div class="swiperdecItem">30天无忧退货</div>
      <div class="swiperdecItem">48小时快速退款</div>
      <div class="swiperdecItem">满88元免邮费</div>
    </div>
    <div class="goodsBox">
      <div class="goodsName">{{ info.name }}</div>
      <div class="goods_brief">{{ info.goods_brief }}</div>
      <div class="price">¥ {{ info.retail_price }}</div>
    </div>
    <div class="numChoose" @click="showMaskType">
      请选择规格和数量 <span class="rightArr">></span>
    </div>
    <div class="goodsDetail">
      <div class="title">商品参数</div>
      <div
        class="goodsDetailItem"
        v-for="(item, index) in attribute"
        :key="index"
      >
        <span class="itemName">{{ item.name }}</span>
        <span class="attriute">{{ item.value }}</span>
      </div>
    </div>
    <div class="goodsShow">
      <div class="goodsImg" v-html="info.goods_desc"></div>
    </div>
    <div class="goodsquestion">
      <div class="title">
        <span class="line"></span>
        <span class="text">常见问题 </span>
        <span class="line"></span>
      </div>
      <div class="content">
        <div class="question" v-for="(item, index) in issue" :key="index">
          <span class="dot"></span>
          <span class="questiontitle">{{ item.question }}</span>
          <div class="awser">{{ item.answer }}</div>
        </div>
      </div>
    </div>
    <div class="allLook">
      <div class="title">
        <span class="line"></span>
        <span class="text">大家都在看 </span>
        <span class="line"></span>
      </div>
      <div class="goodsList">
        <div
          class="goodsItem"
          v-for="(item, index) in productList"
          :key="index"
        >
          <img class="goodsItemImg" :src="item.list_pic_url" alt="" />
          <div class="goodsItemName">{{ item.name }}</div>
          <div class="goodsItemprice">¥ {{ item.retail_price }}</div>
        </div>
      </div>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="star-o"
        text="收藏"
        v-if="collectShow == false"
        @click="goCollect"
      />
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        v-else
        color="#ff5000"
        @click="goCollect"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="allnumber" @click="goCar" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 商品规格 -->
    <div class="mask" v-show="showMask">
      <div class="goodsmask">
        <div class="goodsInfo">
          <img class="infoLeftImg" :src="info.primary_pic_url" alt="" />
          <div class="infoRight">
            <div @click="showMaskType" class="login">x</div>
            <div class="price">价格 ¥{{ info.retail_price }}</div>
            <div class="num">请选择数量</div>
          </div>
        </div>
        <div class="goodsNum">
          数量
          <van-stepper v-model="stepValue" integer />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//1.购物车数量的弹窗显示,主要是if(){if(){}else{}}else{}的嵌套用法
import Navbar from "@/components/Navbar";
import goodsApi from "@/api/goods/index";
import collectApi from "@/api/collection/index";
import carApi from "@/api/car/index";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Toast,
  Stepper,
} from "vant";

Vue.use(Swipe)
  .use(SwipeItem)
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
  .use(Toast)
  .use(Stepper);

export default {
  name: "goods",
  components: {
    Navbar,
  },
  data() {
    return {
      title: "商品展示页",
      id: "",
      banner: [],
      info: {},
      attribute: [],
      issue: [],
      productList: [],
      collectShow: false,
      showMask: false,
      allnumber:0,
      stepValue: 0,
     
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log(this.id);
    this.getGoodsDetail();
  },
  methods: {
    async getGoodsDetail() {
      await goodsApi
        .goodsDetail({
          id: this.id,
          openId: "15845697415",
        })
        .then((res) => {
          this.banner = res.gallery;
          this.info = res.info;
          this.attribute = res.attribute;
          this.issue = res.issue;
          this.productList = res.productList;
          this.collectShow = res.collected;
          this.allnumber=res.allnumber
        });
    },
    //点击收藏
    goCollect() {
      this.collectShow = !this.collectShow;
      collectApi.addcollect({
          openId: "15845697415",
          goodsId: this.id,
        })
        .then((res) => {});
    },

    //mask的展示与隐藏
    showMaskType(e) {
      e.stopPropagation();
      this.showMask = !this.showMask;
    },

    // 添加购物车
    goCar() {
      this.$router.push({name:'car'})
    },

    // 加入到购物车
    addCar() {
      if (this.showMask) {
        if (this.number == 0) {
          Toast({
            message: "请选择商品数量", //提示的内容,
            duration: 2000, //延迟时间,
          });
          return false;
        }
        carApi.addCart({
            openId: "15845697415",
            goodsId: this.id,
            number: this.stepValue,
          })
          .then((res) => {
            this.allnumber =this.allnumber + this.number;
            Toast({
              message:'添加购物车成功',
              duration:2000,
              icon:"success"
            })
          });
      } else {
        this.showMask = true;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.goods-main {
  height: 6000px;
  .van-swipe {
    .van-swipe-item {
      height: 375px;
      .bannerImg {
        width: 100%;
        height: 100%;
      }
    }
    ::v-deep .van-swipe__indicator--active {
      background-color: #fff;
    }
  }
  .swiperdec {
    height: 36px;
    line-height: 36px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    .swiperdecItem {
      width: 33.3%;
      background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
        no-repeat 5px;
      background-size: 5px;
      padding-left: 15px;
    }
  }
  .goodsBox {
    background-color: $bagColor;
    text-align: center;
    .goodsName {
      padding-top: 10px;
      font-size: 20px;
      color: #000;
      margin: 20px 0;
    }
    .goods_brief {
      color: #999;
    }
    .price {
      color: $baseColor;
      margin-top: 15px;
      padding-bottom: 25px;
      font-size: 17px;
    }
  }
  .numChoose {
    background-color: $bagColor;
    position: relative;
    border-top: 1px solid #f8f8f8;
    height: 54px;
    line-height: 54px;
    padding: 0 10px;
    .rightArr {
      position: absolute;
      right: 10px;
    }
  }
  .goodsDetail {
    margin-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
    .title {
      padding: 15px 10px;
      font-size: 19px;
      color: #000;
    }
    .goodsDetailItem {
      width: 325px;
      height: 37px;
      margin-bottom: 8px;
      line-height: 37px;
      background-color: #f7f7f7;
      margin-left: 25px;
      color: #a1a1a1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .itemName {
        display: inline-block;
        width: 68px;
      }
      .attriute {
        padding-left: 8px;
        color: #161616;
      }
    }
  }
  .goodsShow {
    margin-top: 15px;
    .goodsImg {
      width: 375px;
    }
    ::v-deep img {
      width: 100%;
      margin: -3px;
    }
  }
  .goodsquestion,
  .allLook {
    background-color: #fff;
    .title {
      height: 50px;
      line-height: 50px;
      text-align: center;
      .text {
        display: inline-block;
        padding: 0 7px;
      }
      .line {
        display: inline-block;
        width: 49px;
        height: 0.5px;
        background-color: #ccc;
        vertical-align: middle;
      }
    }
    .content {
      margin-left: 10px;
      .question {
        padding: 5px;
        .dot {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #b4282d;
          vertical-align: middle;
        }
        .questiontitle {
          padding-left: 8px;
        }
        .awser {
          color: #a2a2a2;
          margin-left: 10px;
          padding-top: 5px;
        }
      }
    }
  }
  .allLook {
    margin-top: 30px;
    background-color: #f4f4f4;
    .goodsList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .goodsItem {
        width: 49%;
        height: 215px;
        background-color: #fff;
        margin-bottom: 5px;
        text-align: center;
        .goodsItemImg {
          width: 150px;
          height: 150px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .goodsItemprice {
          padding-top: 8px;
          color: $baseColor;
        }
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: rgba(0, 0, 0, 0.5);
    .goodsmask {
      position: fixed;
      bottom: 50px;
      left: 0;
      height: 260px;
      width: 100%;
      background-color: #fff;
      .goodsInfo {
        padding: 15px;
        height: 88px;
        display: flex;
        justify-content: flex-start;
        .infoLeftImg {
          width: 88px;
          height: 88px;
        }
        .infoRight {
          position: relative;
          width: 242px;
          color: #000;
          .login {
            position: absolute;
            font-size: 15px;
            color: #999;
            right: -15px;
            top: 0;
          }
          .price {
            padding: 15px;
            color: $baseColor;
            padding-bottom: 15px;
          }
          .num {
            padding-left: 15px;
          }
        }
      }
      .goodsNum {
        padding: 15px;
        .van-stepper {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>